<template>
  <div class="pa-4">
    <h2>字典功能测试</h2>
    
    <v-row class="mt-4">
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>同步方法测试（模板中使用）</v-card-title>
          <v-card-text>
            <h4>$getDictList('menu_role_label')</h4>
            <div v-if="$getDictList('menu_role_label').length > 0">
              <v-chip
                v-for="item in $getDictList('menu_role_label')"
                :key="item.dictValue"
                class="ma-1"
                color="primary"
              >
                {{ item.dictName }}: {{ item.dictValue }}
              </v-chip>
            </div>
            <div v-else class="text-grey">
              暂无数据（可能需要先预加载）
            </div>
            
            <h4 class="mt-4">$getDictNameByValue('role_data_scope', '0')</h4>
            <v-alert type="info" class="mt-2">
              结果: {{ $getDictNameByValue('role_data_scope', '0') || '未找到' }}
            </v-alert>
          </v-card-text>
        </v-card>
      </v-col>
      
      <v-col cols="12" md="6">
        <v-card>
          <v-card-title>异步方法测试（脚本中使用）</v-card-title>
          <v-card-text>
            <v-btn @click="testAsyncMethods" color="primary" class="mb-4">
              测试异步方法
            </v-btn>
            
            <div v-if="asyncResults.length > 0">
              <h4>异步获取的字典数据:</h4>
              <v-chip
                v-for="item in asyncResults"
                :key="item.dictValue"
                class="ma-1"
                color="secondary"
              >
                {{ item.dictName }}: {{ item.dictValue }}
              </v-chip>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    
    <v-row class="mt-4">
      <v-col cols="12">
        <v-card>
          <v-card-title>预加载测试</v-card-title>
          <v-card-text>
            <v-btn @click="preloadDictionaries" color="success" class="mr-2">
              预加载字典
            </v-btn>
            <v-btn @click="clearDictionaries" color="warning">
              清空缓存
            </v-btn>
            
            <v-alert v-if="preloadStatus" :type="preloadStatus.type" class="mt-4">
              {{ preloadStatus.message }}
            </v-alert>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: 'DictTest',
  data() {
    return {
      asyncResults: [],
      preloadStatus: null
    };
  },
  async created() {
    // 自动预加载一些字典
    await this.preloadDictionaries();
  },
  methods: {
    async testAsyncMethods() {
      try {
        const results = await this.$getDictListAsync('role_data_scope');
        this.asyncResults = results;
        console.log('异步获取字典结果:', results);
      } catch (error) {
        console.error('异步获取字典失败:', error);
      }
    },
    
    async preloadDictionaries() {
      try {
        this.preloadStatus = { type: 'info', message: '正在预加载字典...' };
        
        const dictTypes = ['menu_role_label', 'role_data_scope', 'no_yes'];
        const promises = dictTypes.map(typeCode => this.$getDictListAsync(typeCode));
        await Promise.all(promises);
        
        this.preloadStatus = { type: 'success', message: '字典预加载完成！现在可以在模板中使用同步方法了。' };
        
        // 3秒后清除状态
        setTimeout(() => {
          this.preloadStatus = null;
        }, 3000);
      } catch (error) {
        this.preloadStatus = { type: 'error', message: '字典预加载失败: ' + error.message };
        console.error('字典预加载失败:', error);
      }
    },
    
    clearDictionaries() {
      this.$clearDictList();
      this.asyncResults = [];
      this.preloadStatus = { type: 'warning', message: '字典缓存已清空' };
      
      // 3秒后清除状态
      setTimeout(() => {
        this.preloadStatus = null;
      }, 3000);
    }
  }
};
</script>

<style scoped>
.pa-4 {
  padding: 16px;
}

.ma-1 {
  margin: 4px;
}

.mt-4 {
  margin-top: 16px;
}

.mt-2 {
  margin-top: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mr-2 {
  margin-right: 8px;
}

.text-grey {
  color: #666;
}
</style> 